<template>
  <div class="data-borad">
    <div class="dashcomponent" style="height: 130%">
      <div class="flex-col">
        <div class="timer">
          <el-date-picker
            v-model="month"
            type="month"
            size="small"
            placeholder="请选择月份"
            format="YYYY年MM月"
            value-format="YYYY-MM"
          />
          <span>地区：全国</span>
        </div>
        <div class="dashcomponent flex1" style="height: 0">
          <div class="dashcomponent-title">
            <span class="dashcomponent-title-prefixIcon">
              <i class="iconfont icon-jihuabiao"></i>
            </span>
            <span class="dashcomponent-title-caption"> 关键指标 </span>
          </div>
          <div class="dashcomponent-body">
            <div class="kpi-base">
              <span class="kpi-space"></span>
              <span class="kpi-value kpi-sales">4,771</span>
              <span class="kpi-space"></span>
              <span class="kpi-title">本期销售数量</span>
              <span class="kpi-space"></span>
            </div>
            <div class="kpi-base">
              <div class="kpi-measures">
                <div class="kpi-measure">
                  <span class="kpi-space"></span>
                  <span class="kpi-title">上月</span>
                  <span class="kpi-space"></span>
                  <span class="kpi-value">7,234</span>
                  <span class="kpi-space"></span>
                </div>
                <div class="kpi-measure">
                  <span class="kpi-space"></span>
                  <span class="kpi-title">增长率</span>
                  <span class="kpi-space"></span>
                  <span class="kpi-value">-34.05%</span>
                  <span class="kpi-space"></span>
                </div>
              </div>
            </div>
            <div class="kpi-base">
              <span class="kpi-space"></span>
              <div>
                <span class="kpi-value kpi-discounted">60</span>
                <span class="kpi-space"></span>
                <span class="kpi-title">万元</span>
              </div>

              <span class="kpi-space"></span>
              <span class="kpi-title">本期(折后金额)</span>
              <span class="kpi-space"></span>
            </div>
            <div class="kpi-base">
              <div class="kpi-measures">
                <div class="kpi-measure">
                  <span class="kpi-space"></span>
                  <span class="kpi-title">上月</span>
                  <span class="kpi-space"></span>
                  <span class="kpi-value">87</span>
                  <span class="kpi-space"></span>
                </div>
                <div class="kpi-measure">
                  <span class="kpi-space"></span>
                  <span class="kpi-title">增长率</span>
                  <span class="kpi-space"></span>
                  <span class="kpi-value">-31.30%</span>
                  <span class="kpi-space"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dashcomponent">
      <div class="dashcomponent-title">
        <span class="dashcomponent-title-prefixIcon">
          <i class="iconfont icon-jihuabiao"></i>
        </span>
        <span class="dashcomponent-title-caption"> 销售数量分布 </span>
      </div>
      <div class="dashcomponent-body">
        <china-map></china-map>
      </div>
    </div>
    <div class="dashcomponent">
      <div class="dashcomponent-title">
        <span class="dashcomponent-title-prefixIcon">
          <i class="iconfont icon-jihuabiao"></i>
        </span>
        <span class="dashcomponent-title-caption"> 最受欢迎颜色Top10 </span>
      </div>
      <div class="dashcomponent-body" id="popularColor"></div>
    </div>
    <div class="dashcomponent" style="height: 70%; align-self: end">
      <div class="dashcomponent-title">
        <span class="dashcomponent-title-prefixIcon">
          <i class="iconfont icon-jihuabiao"></i>
        </span>
        <span class="dashcomponent-title-caption"> 折扣率 </span>
      </div>
      <div class="dashcomponent-body flex-row">
        <div class="discountChart" id="discountChart">left</div>
        <div class="discountInfo flex-col">
          <div>单位：万元</div>
          <div class="dashcomponent-body">
            <div class="flex-row" style="width: 100%">
              <div class="kpi-base">
                <span class="kpi-space"></span>
                <span class="kpi-value" style="font-size: 2rem">60</span>
                <span class="kpi-space"></span>
                <span class="kpi-title">总交易额</span>
                <span class="kpi-space"></span>
              </div>
              <div class="kpi-base">
                <span class="kpi-space"></span>
                <span class="kpi-value" style="font-size: 2rem">70</span>
                <span class="kpi-space"></span>
                <span class="kpi-title">吊牌总额</span>
                <span class="kpi-space"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dashcomponent">
      <div class="dashcomponent-title">
        <span class="dashcomponent-title-prefixIcon">
          <i class="iconfont icon-jihuabiao"></i>
        </span>
        <span class="dashcomponent-title-caption">大类产品销售排名 </span>
      </div>
      <div class="dashcomponent-body" id="salesRanking"></div>
    </div>
    <div class="dashcomponent">
      <div class="dashcomponent-title">
        <span class="dashcomponent-title-prefixIcon">
          <i class="iconfont icon-jihuabiao"></i>
        </span>
        <span class="dashcomponent-title-caption"> 本年销售情况走势 </span>
      </div>
      <div class="dashcomponent-body" id="salesTrends"></div>
    </div>
    <div class="dashcomponent">
      <div class="dashcomponent-title">
        <span class="dashcomponent-title-prefixIcon">
          <i class="iconfont icon-jihuabiao"></i>
        </span>
        <span class="dashcomponent-title-caption">最受欢迎产品Top10 </span>
      </div>
      <div class="dashcomponent-body" id="popularGood"></div>
    </div>
    <div class="dashcomponent">
      <div class="dashcomponent-title">
        <span class="dashcomponent-title-prefixIcon">
          <i class="iconfont icon-jihuabiao"></i>
        </span>
        <span class="dashcomponent-title-caption">男女商品销售额 </span>
      </div>
      <div class="dashcomponent-body" id="genderBubble"></div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, reactive, onBeforeUnmount } from "vue";
import ChinaMap from "./map.vue";
// 查询月份
let month = ref("2023-06");
let salesTrendsChart = reactive(null);
let discountChart = reactive(null);
let popularGoodsChart = reactive(null);
let popularColorChart = reactive(null);
let salesRankingChart = reactive(null);
let genderBubbleChart = reactive(null);
// 气泡图数据 [x轴、y轴、销售额、]
const bubbledData = reactive([
  [
    [84, 77, 17096, "衬衣", "男"],
    [213, 77, 27662, "西装", "男"],
    [56, 68, 11546, "T恤", "男"],
    [70, 74, 10582, "阔腿牛仔裤", "男"],
    [299, 75, 4986, "运动套装", "男"],
    [126, 77, 56956, "皮衣", "男"],
    [91, 75, 7895, "夹克", "男"],
    [120, 78, 2548, "针织开衫", "男"],
    [77, 57, 8706, "直筒裤", "男"],
    [182, 53, 14498, "风衣", "男"],
    [81, 79, 1222, "五分裤", "男"],
  ],
  [
    [51, 81, 23968, "衬衣", "女"],
    [561, 81, 35937, "西装", "女"],
    [81, 76, 1373, "T恤", "女"],
    [90, 78, 11389, "阔腿牛仔裤", "女"],
    [162, 80, 5503, "运动套装", "女"],
    [182, 81, 64395, "皮衣", "女"],
    [92, 81, 8064, "夹克", "女"],
    [150, 82, 32945, "针织开衫", "女"],
    [70, 66, 13727, "直筒裤", "女"],
    [300, 40, 62896, "风衣", "女"],
    [70, 83, 12651, "五分裤", "女"],
  ],
]);

onMounted(() => {
  drawSalesTrends();
  drawDiscount();
  drawPopularGoods();
  drawPopularColor();
  drawSalesRanking();
  drawGenderBubble();
  window.addEventListener("resize", chartsResize);
});

const chartsResize = () => {
  salesTrendsChart && salesTrendsChart.resize();
  discountChart && discountChart.resize();
  popularGoodsChart && popularGoodsChart.resize();
  popularColorChart && popularColorChart.resize();
  salesRankingChart && salesRankingChart.resize();
  genderBubbleChart && genderBubbleChart.resize();
};
/** 本年销售情况走势折线图  */
const drawSalesTrends = () => {
  salesTrendsChart = echarts.getInstanceByDom(
    document.getElementById("salesTrends")
  );
  if (
    salesTrendsChart != null &&
    salesTrendsChart != "" &&
    salesTrendsChart != undefined
  ) {
    salesTrendsChart.dispose();
  }

  salesTrendsChart = echarts.init(document.getElementById("salesTrends"));

  const option = {
    grid: {
      left: "3%",
      right: "3%",
      top: "3%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    xAxis: {
      type: "category",
      data: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
      ],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320, 212, 421, 513, 763, 832],
        type: "line",
        smooth: true,
      },
    ],
  };

  option && salesTrendsChart.setOption(option);
};
/** 折扣率饼图 */
const drawDiscount = () => {
  discountChart = echarts.getInstanceByDom(
    document.getElementById("discountChart")
  );
  if (
    discountChart != null &&
    discountChart != "" &&
    discountChart != undefined
  ) {
    discountChart.dispose();
  }
  discountChart = echarts.init(document.getElementById("discountChart"));
  const option = {
    color: ["#5fb878", "#eeeeee"],

    series: [
      {
        name: "折扣率",
        type: "pie",
        radius: ["50%", "70%"],
        avoidLabelOverlap: false,
        hoverAnimation: false, //关闭放大动画
        selectedOffset: 0, //选中块的偏移量
        label: {
          show: false,
          position: "center",
          formatter: "{d}%",
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 435,
            name: "直接访问",
            selected: true, //默认选中第一块
            label: {
              show: true, //默认显示第一块
              fontSize: "16",
              fontWeight: "bold",
            },
          },
          { value: 310, name: "邮件营销" },
        ],
      },
    ],
  };
  option && discountChart.setOption(option);
};
/** 最受欢迎的产品柱状图 */
const drawPopularGoods = () => {
  popularGoodsChart = echarts.getInstanceByDom(
    document.getElementById("popularGood")
  );
  if (
    popularGoodsChart != null &&
    popularGoodsChart != "" &&
    popularGoodsChart != undefined
  ) {
    popularGoodsChart.dispose();
  }

  popularGoodsChart = echarts.init(document.getElementById("popularGood"));
  const option = {
    grid: {
      left: "3%",
      right: "3%",
      top: "3%",
      bottom: "3%",
      containLabel: true,
    },
    color: ["#34B19A"],
    xAxis: {
      type: "category",
      data: [
        "长袖衬衣",
        "休闲夹克",
        "光皮皮衣",
        "长袖T恤",
        "直筒牛仔裤",
        "礼服西装",
        "便服西装",
        "短袖T恤",
        "针织衫",
        "针织裙",
      ],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        data: [843, 667, 660, 594, 580, 489, 427, 295, 149, 77],
        type: "bar",
        barWidth: "50%",
        label: {
          normal: {
            show: true,
            position: "top",
          },
        },
      },
    ],
  };
  option && popularGoodsChart.setOption(option);
};
/** 最受欢迎的颜色柱状图 */
const drawPopularColor = () => {
  popularColorChart = echarts.getInstanceByDom(
    document.getElementById("popularColor")
  );
  if (
    popularColorChart != null &&
    popularColorChart != "" &&
    popularColorChart != undefined
  ) {
    popularColorChart.dispose();
  }
  popularColorChart = echarts.init(document.getElementById("popularColor"));
  const option = {
    grid: {
      left: "3%",
      right: "3%",
      top: "3%",
      bottom: "3%",
      containLabel: true,
    },
    color: ["#34B19A"],
    xAxis: {
      type: "category",
      data: [
        "黑白色系",
        "灰色系",
        "蓝色系",
        "黄色系",
        "棕色系",
        "绿色系",
        "红色系",
        "橙色系",
      ],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        rotate: 60,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        data: [1057, 881, 781, 601, 577, 489, 201, 89],
        type: "bar",
        barWidth: "50%",
        label: {
          normal: {
            show: true,
            position: "top",
          },
        },
      },
    ],
  };
  option && popularColorChart.setOption(option);
};
/** 各大类产品销售排名 柱状图 */
const drawSalesRanking = () => {
  salesRankingChart = echarts.getInstanceByDom(
    document.getElementById("salesRanking")
  );
  if (
    salesRankingChart != null &&
    salesRankingChart != "" &&
    salesRankingChart != undefined
  ) {
    salesRankingChart.dispose();
  }
  salesRankingChart = echarts.init(document.getElementById("salesRanking"));
  const option = {
    grid: {
      left: "3%",
      right: "3%",
      top: "3%",
      bottom: "3%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      type: "value",
      axisLabel: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      data: ["衬衣", "西装", "T恤", "牛仔裤", "夹克", "皮衣"],
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      {
        data: [901, 892, 781, 742, 692, 561],
        type: "bar",
        barWidth: "50%",
        label: {
          normal: {
            show: true,
            position: "right",
          },
        },
      },
    ],
  };
  option && salesRankingChart.setOption(option);
};
/** 男女商品销售额 */
const drawGenderBubble = () => {
  genderBubbleChart = echarts.getInstanceByDom(
    document.getElementById("genderBubble")
  );
  if (
    genderBubbleChart != null &&
    genderBubbleChart != "" &&
    genderBubbleChart != undefined
  ) {
    genderBubbleChart.dispose();
  }
  genderBubbleChart = echarts.init(document.getElementById("genderBubble"));
  let data = bubbledData;
  const option = {
    legend: {
      right: "0%",
      top: "0%",
      data: ["男", "女"],
    },
    grid: {
      left: "3%",
      right: "6%",
      top: "12%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      name: "元",
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    yAxis: {
      name: "件",
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
      scale: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    series: [
      {
        name: "男",
        data: data[0],
        type: "scatter",
        symbolSize: function (data) {
          return Math.sqrt(data[2]) / 10;
        },
        emphasis: {
          focus: "series",
          label: {
            show: true,
            formatter: function (param) {
              return param.data[3];
            },
            position: "top",
          },
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(52, 177, 154, 0.5)",
          shadowOffsetY: 5,
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
            {
              offset: 0,
              color: "rgb(52, 177, 154)",
            },
            {
              offset: 1,
              color: "rgb(52, 177, 154)",
            },
          ]),
        },
      },
      {
        name: "女",
        data: data[1],
        type: "scatter",
        symbolSize: function (data) {
          return Math.sqrt(data[2]) / 10;
        },
        emphasis: {
          focus: "series",
          label: {
            show: true,
            formatter: function (param) {
              return param.data[3];
            },
            position: "top",
          },
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(71, 143, 207, 0.5)",
          shadowOffsetY: 5,
          color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
            {
              offset: 0,
              color: "rgb(71, 143, 207)",
            },
            {
              offset: 1,
              color: "rgb(71, 143, 207)",
            },
          ]),
        },
      },
    ],
  };

  option && genderBubbleChart.setOption(option);
};

onBeforeUnmount(() => {
  window.removeEventListener("resize", chartsResize);
});
</script>
<style scoped lang="scss">
.data-borad {
  // 100% - padding上下的高度
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  padding: 1rem;
  background: rgb(245, 246, 250);
  display: grid;
  grid-template-columns:
    minmax(100px, 1fr) minmax(100px, 2fr)
    minmax(100px, 1fr);
  // grid-template-columns: 1fr 2fr 1fr;
  // grid-template-rows: 1fr 1fr 1fr;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
}
.dashcomponent {
  border-radius: 5px;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  &:nth-child(1) {
    .flex-col {
      width: 100%;
      height: 100%;
    }
  }
  &:nth-child(2) {
    grid-column: 2 / 3; // 以列网格线为基准
    grid-row: 1 / 3; // 以行网格线为基准
  }
}
.dashcomponent-title {
  height: 2rem;
  padding: 0.5rem;
  justify-content: flex-start;
  display: flex;
  text-align: left;
  align-items: center;
  vertical-align: middle;
  font-size: 1.2rem;
  border-bottom: 1px grey solid;

  &-prefixIcon {
    margin-right: 0.5rem;
    font-family: szfont;
    color: rgb(52, 177, 154);
    font-size: 1.2rem;

    .iconfont {
      font-size: 1.2rem;
    }
  }

  &-caption {
    text-overflow: ellipsis;
    white-space: pre;
    overflow: hidden;
  }
}
.dashcomponent-body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.kpi-base {
  height: 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .kpi-value {
    display: inline-block;
    visibility: visible;
  }
  .kpi-title {
    font-size: 1.2rem;
    color: rgb(125, 134, 143);
    white-space: nowrap;
    display: inline-block;
  }
  .kpi-space {
    width: 0.8rem;
    height: 0.8rem;
    display: inline-block;
  }
}
.kpi-measures {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.kpi-sales {
  color: rgb(52, 177, 154);
  font-size: 2.6rem;
}
.kpi-discounted {
  color: rgb(71, 143, 207);
  font-size: 2.6rem;
}

.discountChart {
  width: 40%;
  height: 100%;
}
.discountInfo {
  flex: 1;
  height: 100%;
}
</style>
